<template>
    <div>
      <h1>注册页</h1>
      <button @click="goToAnotherPage('/login')">跳转到登录页</button>
      <button @click="goToAnotherPage('/register')">跳转到注册页</button>
      <button @click="goToAnotherPage('/index')">跳转到主页</button>
      <button @click="goToAnotherPage('/change_password')">跳转到修改密码页</button>
      <button @click="goToAnotherPage('/forgot_password')">跳转到忘记密码页</button>
    </div>
  </template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 响应式状态
const apiResult = ref('');
const loading = ref(false);
const error = ref(null);

// 页面跳转方法
const goToAnotherPage = (path) => {
  router.push(path);
};

// API 测试方法
const testapi = async () => {
  try {
    loading.value = true;
    error.value = null;
    const response = await axios.post('http://localhost:5432/');
    apiResult.value = response.data;
  } catch (err) {
    error.value = `请求失败: ${err.message}`;
    apiResult.value = '';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.api-test-section {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

button {
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.loading {
  color: #666;
  margin-top: 0.5rem;
}

.error-message {
  color: #ff4444;
  margin-top: 0.5rem;
}

.result {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}
</style>